import './img1.png';
let small = document.querySelector('.smallpic');
let zoom = document.querySelector('.zoom');
let big = document.querySelector('.bigpic');

small.addEventListener('mouseover', () => {
    zoom.style.display = 'block';
    big.style.display = 'block';
});

small.addEventListener('mouseout', () => {
    zoom.style.display = 'none';
    big.style.display = 'none';
});
let rate = 500 / 220;
small.onmousemove = function (event) {
    var zoomX = event.clientX - small.offsetLeft - 70;
    var zoomY = event.clientY - small.offsetTop - 70;
    if (zoomX < 0) {
        zoomX = 0;
    }
    if (zoomX >= 350) {
        zoomX = 350;
    }
    if (zoomY < 0) {
        zoomY = 0;
    }
    if (zoomY >= 350) {
        zoomY = 350;
    }
    zoom.style.left = zoomX + 'px';
    zoom.style.top = zoomY + 'px';
    big.style.backgroundPositionX = -zoomX * rate + 'px';
    big.style.backgroundPositionY = -zoomY * rate + 'px';
};
